<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="include.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta content="de" http-equiv="Content-Language">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>fotoDB</title>
	<script>
	var editStatus=null;
	
	function init(){
		var iframe=parent.window.document.getElementById('tooltipFrame'+<c:out value="${imgInfo.nr}"/>);
		if (iframe!=null){
			iframe.setAttribute('height',getComputedStyle(document.body.parentNode).height);
		}
	}
	function beginEdit(){
		var editButton=document.getElementById('editButton');
		if (editStatus==null){
			editButton.style.background='url(images/ok2.png)';
			editStatus='editing';
			
			var imgName=document.getElementById('imgName');
			imgName.removeAttribute('readonly');
			imgName.focus();
			imgName.select();
			imgName.style.border='solid';
			imgName.style.color='black';
			imgName.style.borderWidth='thin';
			imgName.onclick='this.select()';
			
			var imgRate=document.getElementById('imgRate');
			imgRate.style.color='red';
			imgRate.style.border='solid';
			imgRate.style.borderWidth='thin';
			imgRate.style.color='black';
			imgRate.removeAttribute('readonly');
			imgRate.onclick='this.select()';
			
			var categoryExist=document.getElementById('categoryExist');
			categoryExist.style.display='none';
			var categoryAll=document.getElementById('categoryAll');
			categoryAll.style.display='block';

			var keywordExist=document.getElementById('keywordExist');
			keywordExist.style.display='none';
			var keywordAll=document.getElementById('keywordAll');
			keywordAll.style.display='block';
			init();
		}else{
			var form=document.getElementById('form');
			form.submit();
		}

	}
	
	</script>
</head>
<body style="width:250px;height:auto;" onload="init()">
	<form id="form" action="<%=dbmode%>ImgUpdateApp?action=updateImageTooltip&bnr=<c:out value="${imgInfo.nr}" />" method="post">
	<div id="" style="text-align:left;width:100%;background-color:white;">
		<div style="position:relative">
			<input id="editButton" onclick="beginEdit()" type="button" style="position:absolute;right:5px;top:5px;width:25px;height:25px;background:url(images/edit.png)"/>
			<div style="width:200px;margin-left:10px;">
				<em>Name:</em><br/>
				<font color="blue">
				<input id="imgName" name="imgName" size="20" style="border-width:0px;border-color:gray;color:blue" readonly="readonly" type="text" value="<c:out value="${imgInfo.name}" />" />
				</font>
			</div>
			<div style="width:200px;margin-left:10px">
				<em>Bewertung(1-5):</em>
				<c:if test="${imgInfo.rate==0}">
					<input id="imgRate" name="imgRate" size="18" style="border:none;color:gray" readonly="readonly" type="text" value="Nicht vergeben" onfocus="this.select()" />
				</c:if>
				<c:if test="${imgInfo.rate!=0}">
					<input id="imgRate" name="imgRate" size="18" style="border:none;color:red" readonly="readonly" type="text" value="<c:out value="${imgInfo.rate}"/>" onfocus="this.select()" />
				</c:if>
				
			</div>
			<div style="width:200px;margin-left:10px"><em>Kategorie:</em></div>
			<div id="categoryExist" style="width:200px;margin-left:10px">
				<c:forEach var="category" items="${imgInfo.categories}">
					<a href="#"	style="margin-right:10px;">
						<c:out value="${category.name}"/>
					</a>
				</c:forEach>
				&nbsp;
			</div>
			
			<div id="categoryAll" style="width:200px;margin-left:10px;display:none">
				<c:set var="check" value="0" />
				<c:forEach var="category" items="${categories}">
					<div>
						<c:forEach var="tmp" items="${imgInfo.categories}">
							<c:if test="${category.nr==tmp.nr}">
								<c:set var="check" value="1" />
							</c:if>
						</c:forEach>
						<c:choose>
							<c:when test="${check==0}">
							<div style="float:left">
								<input type="checkbox" name="category" value="${category.nr}" />${category.name}
							</div>
							</c:when>
							<c:otherwise>
							<div style="float:left">
								<input type="checkbox" name="category" value="${category.nr}" checked="checked"/>${category.name}
							</div>
							</c:otherwise>
						</c:choose>
					</div>
					<c:set var="check" value="0" />
				</c:forEach>
			</div>

			
			
			<div style="width:200px;margin-left:10px;clear:both"><em>Schlagworte:</em></div>
			<div id="keywordExist" style="width:200px;margin-left:10px">
				<c:forEach var="keyword" items="${imgInfo.keywords}">
					<a href="#" style="margin-right:10px;">
						<c:out value="${keyword.word}"/>
					</a>
				</c:forEach>
				&nbsp;
			</div>
			<div id="keywordAll" style="width:200px;margin-left:10px;display:none">
				<c:set var="check" value="0" />
				<c:forEach var="keyword" items="${keywords}">
					<div>
						<c:forEach var="tmp" items="${imgInfo.keywords}">
							<c:if test="${keyword.nr==tmp.nr}">
								<c:set var="check" value="1" />
							</c:if>
						</c:forEach>
						<c:choose>
							<c:when test="${check==0}">
							<div style="float:left">
								<input type="checkbox" name="keyword" value="${keyword.nr}" />${keyword.word}
							</div>
							</c:when>
							<c:otherwise>
							<div style="float:left">
								<input type="checkbox" name="keyword" value="${keyword.nr}" checked="checked"/>${keyword.word}
							</div>
							</c:otherwise>
						</c:choose>
					</div>
					<c:set var="check" value="0" />
				</c:forEach>
			</div>
			
		</div>
		
		<div style="width:200px;margin-left:10px;clear:both"><em>EXIF Metadata:</em></div>
		<div style="width:240px;margin-left:10px;clear:both">
			<div>Image Width: <font color="#8c0b14"><c:out value="${imgInfo.exif.imgWidth}" /></font></div>
			<div>Image Height: <font color="#8c0b14"><c:out value="${imgInfo.exif.imgHeight}" /></font></div>
			<div>exposure Time: <font color="#8c0b14"><c:out value="${imgInfo.exif.exposureTime}" /></font></div>
			<div>F-Number: <font color="#8c0b14"><c:out value="${imgInfo.exif.fnumber}" /></font></div>
			<div>exposure Program:<br/><font color="#8c0b14"><c:out value="${imgInfo.exif.exposureProgram}" /></font></div>
			<div>Time Digitized:<br/><font color="#8c0b14"><c:out value="${imgInfo.exif.timeDigitized}" /></font></div>
			<div>Time Original:<br/><font color="#8c0b14"><c:out value="${imgInfo.exif.timeOriginal}" /></font></div>
			<div>Color Space: <font color="#8c0b14"><c:out value="${imgInfo.exif.colorSpace}" /></font></div>
			<div>Exif Img Width: <font color="#8c0b14"><c:out value="${imgInfo.exif.exifImgWidth}" /></font></div>
			<div>Exif Img Height: <font color="#8c0b14"><c:out value="${imgInfo.exif.exifImgHeight}" /></font></div>
			<div>exposure Mode: <font color="#8c0b14"><c:out value="${imgInfo.exif.exposureMode}" /></font></div>
			<div>Make: <font color="#8c0b14"><c:out value="${imgInfo.exif.make}" /></font></div>
			<div>Model: <font color="#8c0b14"><c:out value="${imgInfo.exif.model}" /></font></div>
			<div>Orietation: <br/><font color="#8c0b14"><c:out value="${imgInfo.exif.orietation}" /></font></div>		
			<div>X Resolution: <font color="#8c0b14"><c:out value="${imgInfo.exif.XResolution}" /></font></div>
			<div>Y Resolution: <font color="#8c0b14"><c:out value="${imgInfo.exif.YResolution}" /></font></div>
		</div>
	</div>
	</form>
	<input id="dbmode" type="text" value="<%=dbmode%>" style="display:none"/>
</body>
</html>
